<#include "/admin/_inc/_head.html"/>
<#include "/admin/_inc/_layout.html" />
<!DOCTYPE html>
<html lang="en">

<head>
	<@head />
	<link rel="stylesheet" href="/assets/js/plugins/jquery-treegrid/css/jquery.treegrid.css">
</head>

<body >
	<@layout>

		<div class="wrapper wrapper-content animated fadeInRight">

            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox ">

                        <div class="ibox-content">
                            <div class="example-wrap">
                                <div class="example">

                                    <div class="btn-group hidden-xs" id="toolbar" role="group">
                                        <button id="btn_add" type="button" class="btn btn-info btn-sm">
                                            <i class="fa fa-plus" aria-hidden="true"></i>
                                            添加
                                        </button>
                                    </div>

                                    <table id="data-table" class="treegrid table-bordered table-condensed table-hover col-xs-12" data-mobile-responsive="true">
                                    </table>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

            </div>
        </div>



	</@layout>

	<script type="text/javascript" src="/assets/js/plugins/jquery-treegrid/js/jquery.treegrid.extension.js"></script>

	<script type="text/javascript">

        var $table = null;
        $(function () {
            initTable();
            btnEvent();
        });

        function initTable() {

            $table = $('#data-table').treegrid({
                server:true,
                type: "GET", //请求数据的ajax类型
                url: global.adminPath + '/category/tree',    //请求数据的ajax的url
                initialState: 'collapsed',
                idColumn: 'categoryId',
                parentColumn: 'categoryPId',
                sortColumn: 'categoryOrder',
                saveState: true,
                treeColumn: 1,
                singleSelect:false,//需设置
                checkOnSelect : true,
                selectOnCheck : true,
                expanderExpandedClass: 'glyphicon glyphicon-chevron-down',
                expanderCollapsedClass: 'glyphicon glyphicon-chevron-right',
                columns:[{
                    field: 'ck',
                    checkbox: true
                },{
                    title: '栏目名称',
                    field: 'categoryName',
                },{
                    title:'URL连接',
                    field:'href',
                    formatter:function (value, row, index) {
                        return value;
                    }
                },{
                    title: '连接类型',
                    field: 'target',
                    formatter:function (value, row, index) {
                        return value;
                    }
                },{
                    title:'排序',
                    field:'categoryOrder'
                },{
                    title: '图片',
                    field: 'image',
                    formatter:function (value, row, index) {
                        if(!value)return'';
                        var html='<a href="'+value+'" target="_blank" title="" class="preview btn btn-o btn-danger btn-xs">\
                            <i class="fa fa-image"></i>\
                            </a>';

                        return html;
                    }
                },{
                    title: '是否显示',
                    field: 'showModes',
                    formatter:function (value, row, index) {
                        if(value==0){
                            return '隐藏';
                        }else {
                            return '显示';
                        }
                    }
                },{
                    title: '操作',
                    field: '',
                    formatter:function (value, row, index) {
                        return [
                            '<button class="btn btn-info btn-xs" type="button" onclick="tgridObj.edit('+row.categoryId+')"><i class="fa fa-pencil-square-o"></i> 编辑</button>',
                            '&nbsp;&nbsp;<button class="btn btn-info btn-xs" type="button" onclick="tgridObj.del('+row.categoryId+')"><i class="fa fa-trash"></i> 移除</button>'
                        ].join('');
                    }
                }
                ],
                onLoadSuccess : function(row,data) {
                    debugger
                    // $(this).treegrid('clearChecked');
                    // $(this).treegrid('clearSelections');
                    // debugger
                    // $('#monitordiv input:checkbox').each(function(index,el){
                    //     el.disabled=true;
                    // });
                },
// 			toolbar: '#menuDataGridToolbar',
                loadFilter: function (data, parent) {
                    // var opt = $(this).data().treegrid.options;
                    // return treeFilter(data, opt);
                },
                onBeforeSelect: function(node) {
//                     var s=$('#resTreeGrid').treegrid('getSelections');
//                     alert(s.length);
// //                 alert(node.code);
//                     //只能选择叶子节点，不能选择非叶子节点
//                     if(node.type == 'area'){
//                         layer.msg('不能选择该区域节点',{icon: 0});
//                         return false;
//                     }

                }

            });


        }


        function btnEvent() {
            $('#btn_query').click(function () {
                $table.bootstrapTable('destroy');
                initTable();
            });

            $('#btn_add').click(function () {
                var url = global.adminPath + '/category/addview';
                layer_show('添加', url, 800, 500);
            });


        }

		var tgridObj = {
			edit: function (categoryId) {
                // debugger
                // $table.treegrid('getSelections');

				var url = global.adminPath + '/category/edit/' + categoryId;
				layer_show('编辑', url, 800, 500);
			},
			del: function (categoryId) {

				layer.confirm('确认要删除吗？', function (index) {
					var data = {};
					$.ajax({
						type: "POST",
						data: data,
						dataType: 'json',
						url: global.adminPath + '/category/delete/' + categoryId,
						success: function (res) {
							if (res.success) {
								location.reload();
								layer.alert('已删除!', {
									icon: 1
								});
							} else {
								layer.alert(res.message, {
									icon: 2
								});
							}
						}
					});


				});
			}

		}



	</script>
</body>

</html>